<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="description" content="" />
		<meta name="author" content="" />	
		<title>Web数据挖掘</title>
	</head>

	<body>
		<div class="top">
			<image class="topLogo" src="https://img1.imgtp.com/2023/06/21/H8F3Ds5y.jpg"></image>
			<h1 class="topText">雷云龙 的 Final Assignment</h1>
		</div>
		<div class="content">
			<div class="chahua" style="
          background-image: url('https://pic.imgdb.cn/item/648ef2061ddac507ccd89397.png');
        "></div>
			<div class="biaodan">
				<image class="pythonLogo" src="https://pic.imgdb.cn/item/648ef0831ddac507ccd5fc50.png"></image>
				<h3>数据爬取</h3>
				<h4>可视化平台</h4>
				<form id="form" method="POST" action="/wait">
					<input type="text" id="job" name="job" placeholder="请输入岗位名称" required autofocus />
					<input type="text" id="area" name="area" placeholder="请输入岗位地区(仅支持广州、深圳)" required />
					<button id="sign_button" class="button-33" type="submit" role="button">
						查询
					</button>
				</form>
			</div>
		</div>
		<div class="footText">
			此平台基于 Flask框架 + Echarts数据可视化图表 搭建而成
		</div>
	</body>
	<style>
		@media screen and (max-width:1920px) {
			body {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				background-color: #ffaa00;
				overflow: hidden;
			}

			.top {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				margin-left: 30px;
			}

			.topLogo {
				width: 60px;
				height: 60px;
				border-radius: 100%;
			}

			.topLogo:hover {
				transform: rotate(360deg);
				transition: all 1s ease-out;
			}

			.topText {
				font-size: 36px;
				margin-left: 15px;
				color: white;
			}

			.topText:hover {
				background: -webkit-linear-gradient(#ffaaff, #5555ff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.content {
				width: 800px;
				height: 500px;
				background-color: white;
				margin: auto;
				margin-top: 10px;
				border-radius: 30px;
				display: flex;
				flex-direction: row;
				box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
					rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
			}

			.chahua {
				width: 40%;
				margin-left: 30px;
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}

			.biaodan {
				width: 60%;
				height: 100%;
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 0px 30px 30px 0px;
			}

			.pythonLogo {
				width: 60px;
				height: 60px;
			}

			.biaodan h3 {
				font-size: 30px;
				font-weight: 500;
			}

			.biaodan h4 {
				font-size: 22px;
				margin-top: -20px;
				font-weight: 300;
				letter-spacing: 5px;
			}

			form {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			#job {
				border: none;
				width: 300px;
				height: 30px;
				border-bottom: 2px solid #cccccc;
				padding: 5px;

			}

			#area {
				margin-top: 30px;
				border: none;
				width: 300px;
				height: 30px;
				border-bottom: 2px solid #cccccc;
				padding: 5px;
			}

			#sign_button {
				width: 250px;
				height: 50px;
				border-radius: 40px;
				border: none;
				margin-top: 30px;
			}

			.button-33 {
				background-color: #55ffff;
				border-radius: 100px;
				box-shadow: rgba(0, 102, 204, 0.35) 0 -25px 18px -14px inset,
					rgba(0, 102, 204, 0.25) 0 1px 2px, rgba(0, 102, 204, 0.25) 0 2px 4px,
					rgba(0, 102, 204, 0.25) 0 4px 8px, rgba(0, 102, 204, 0.25) 0 8px 16px,
					rgba(0, 102, 204, 0.25) 0 16px 32px;
				color: #29b7cb;
				/* color: white; */
				cursor: pointer;
				display: inline-block;
				font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto,
					sans-serif;
				padding: 7px 20px;
				text-align: center;
				text-decoration: none;
				transition: all 250ms;
				border: 0;
				font-size: 16px;
				user-select: none;
				-webkit-user-select: none;
				touch-action: manipulation;
			}

			.button-33:hover {
				box-shadow: rgba(0, 102, 204, 0.35) 0 -25px 18px -14px inset,
					rgba(0, 102, 204, 0.25) 0 1px 2px, rgba(0, 102, 204, 0.25) 0 2px 4px,
					rgba(0, 102, 204, 0.25) 0 4px 8px, rgba(0, 102, 204, 0.25) 0 8px 16px,
					rgba(0, 102, 204, 0.25) 0 16px 32px;
				transform: scale(1.05) rotate(-1deg);
			}

			.footText {
				font-size: 12px;
				color: #808080;
				position: absolute;
				bottom: -5%;
				left: 40%;
			}
		}

		@media screen and (min-width:1920px) {
			body {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				background-color: #29b7cb;
				overflow: hidden;
			}

			.top {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				margin-left: 30px;
			}

			.topLogo {
				width: 80px;
				height: 80px;
				border-radius: 100%;
			}

			.topLogo:hover {
				transform: rotate(360deg);
				transition: all 1s ease-out;
			}

			.topText {
				font-size: 40px;
				margin-left: 15px;
				color: white;
			}

			.topText:hover {
				background: -webkit-linear-gradient(#85FFBD, #FFFB7D);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.content {
				width: 1100px;
				height: 600px;
				background-color: white;
				margin: auto;
				margin-top: 30px;
				border-radius: 30px;
				display: flex;
				flex-direction: row;
				box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
					rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
			}

			.chahua {
				width: 40%;
				margin-left: 30px;
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}

			.biaodan {
				width: 60%;
				height: 100%;
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 0px 30px 30px 0px;
			}

			.pythonLogo {
				width: 80px;
				height: 80px;
			}

			.biaodan h3 {
				font-size: 36px;
				font-weight: 500;
			}

			.biaodan h4 {
				font-size: 28px;
				margin-top: -20px;
				font-weight: 300;
				letter-spacing: 5px;
			}

			form {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			#job {
				border: none;
				width: 300px;
				height: 30px;
				border-bottom: 2px solid #cccccc;
				padding: 5px;
			}

			#area {
				margin-top: 30px;
				border: none;
				width: 300px;
				height: 30px;
				border-bottom: 2px solid #cccccc;
				padding: 5px;
			}

			#sign_button {
				width: 250px;
				height: 50px;
				border-radius: 40px;
				border: none;
				margin-top: 30px;
			}

			.button-33 {
				background-color: #55ffff;
				border-radius: 100px;
				box-shadow: rgba(0, 102, 204, 0.35) 0 -25px 18px -14px inset,
					rgba(0, 102, 204, 0.25) 0 1px 2px, rgba(0, 102, 204, 0.25) 0 2px 4px,
					rgba(0, 102, 204, 0.25) 0 4px 8px, rgba(0, 102, 204, 0.25) 0 8px 16px,
					rgba(0, 102, 204, 0.25) 0 16px 32px;
				color: 29b7cb;
				cursor: pointer;
				display: inline-block;
				font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto,
					sans-serif;
				padding: 7px 20px;
				text-align: center;
				text-decoration: none;
				transition: all 250ms;
				border: 0;
				font-size: 16px;
				user-select: none;
				-webkit-user-select: none;
				touch-action: manipulation;
			}

			.button-33:hover {
				box-shadow: rgba(0, 102, 204, 0.35) 0 -25px 18px -14px inset,
					rgba(0, 102, 204, 0.25) 0 1px 2px, rgba(0, 102, 204, 0.25) 0 2px 4px,
					rgba(0, 102, 204, 0.25) 0 4px 8px, rgba(0, 102, 204, 0.25) 0 8px 16px,
					rgba(0, 102, 204, 0.25) 0 16px 32px;
				transform: scale(1.05) rotate(-1deg);
			}

			.footText {
				font-size: 16px;
				position: absolute;
				left: 40%;
				bottom: -5%;
				color: #808080;
			}
		}
	</style>

</html>